<template>
  <view class="content">
      <view class="container">
        <!-- <view style="box-sizing: unset;" class="rule-box" @click="goToRule">使用规则</view> -->
        <view style="box-sizing: unset;" class="phone-box-icon" @click="callPhone">
          <!-- <image class="phone-icon" :src="customerService"></image> -->
        </view>
        <!-- <view style="box-sizing: unset;color: #4a779c;" class="phone-box" @click="callPhone">联系客服</view> -->
        <view style="height: 467rpx;width: 100%;"></view>
        <view class="content-box">
  		  <view class="today">立减金发放中</view>
          <!-- <view class="zf-title u-flex u-flex-nowrap">
  			<view class="zf-line"></view>
  			<view class="zf-word">今日可兑消费立减金</view>
  			<view class="zf-line"></view>
  		</view> -->
		<view class="u-flex u-flex-nowrap">
  		<view class="gj u-flex u-flex-nowrap" >
  			<view class="gj-yuan">￥</view>{{consumePoints}}
  			</view>
			<view class="gj-gj">今日可用</view>
			</view>
  			<!-- <view class="auto-zfb">微信支付时自动抵扣</view> -->
			<view class="auto-zfb u-flex">
				<view class="zfb-logo"></view>
				<view class="zfb-text">直接到账微信</view>
			</view>
  <!-- <view class="mid-line"></view> -->
  
  <view class="input-new u-flex u-flex-nowrap" style="align-items: unset;">
	  <input :adjust-position="false" type="text" v-model="verifyCode" placeholder="输入6位验证码" class="phone-input-new" style="margin: auto auto auto 0;" maxlength="6" focus="true"
	    @input="handleInputVerify" @blur="sc" />
		<view class="phone-input-new2" style="margin: auto 0 auto auto;" @click="handleResendCode">
		  {{ countdownText }}
		</view>
  </view>
  
  		<view class="change-wsd"  @click="handleConfirm">立即领取</view>
  			<!-- <view class="jf-num">兑换消耗移动积分：{{consumePoints*240}}</view> -->
  		
  		</view>
  	
        
      </view>
  
  
  <!-- 选择金额弹出层 -->
  <view class="popup-mask" v-if="showAmountPopup" @click="yhClose" >
    <view class="popup-content" style="box-sizing: unset;" @click.stop>
      <view class="popup-title">选择银行卡立减券类型</view>
      <view class="popup-tips">请选择<text style="color: #c55e4f;">常用银行卡</text> ，点确定后自动发放到微信卡包</view>
      <view class="amount-grid">
        <view v-for="(item, index) in bankList" :key="index" class="amount-item"
          :class="{ 'selected': selectedAmount === item.id }" @click="selectAmount(item.id)">
          <image :src="bankIcon[item.icon]" class="amount-icon"></image>
          <text class="amount-value">{{ item.name }}</text>
        </view>
      </view>
      <view class="popup-btns">
        <view class="popup-btn confirm" @click="confirmAmount">确定</view>
      </view>
    </view>
  </view>
  
  <!-- 添加 loading 遮罩层 -->
  <view class="loading-mask" v-if="isLoading">
    <view class="loading-content">
      <view class="loading-spinner"></view>
      <text class="loading-text">正在发放微信券，请稍候...</text>
    </view>
  </view>
      
    </view>
  
</template>

<script>
import { autoOrder, customOrder, orderPay, resendOrderSms, getSign, getUserCoupons, saveData, errorPhone, updatePhone, getYhkq, ifyz,clickyh } from '@/api/points'
import { wxConfig } from '@/config/index'
import zhongguo from '@/static/zhongguo.svg'
import jianshe from '@/static/jianshe.svg'
import zhaoshang from '@/static/zhaoshang.svg'
import gongshang from '@/static/gongshang.svg'
import nongye from '@/static/nongye.svg'
import youzheng from '@/static/youzheng.svg'
export default {
  data() {
    return {
      verifyCode: "",
      isAgree: false,
      statusBarHeight: 0,
      phone: "",
      countdown: 60,
      countdownText: "重发",
      timer: null,
      consumePoints: 0,
      customOrderRes: null,
      //ywb
      type: "",
      orderId: "",
      signRes: null,
      out_request_no: this.generateRandomString(32),
      // out_request_no: 'haneefgmsjorwflimdxgftgzcdmwhosr',
      // 新增弹出层相关数据
      showAmountPopup: false,
      selectedAmount: "",
      bankList: [],
      isLoading: false,
      orderData: [],
      isConfirming: false,
      bankIcon: {
        zhongguo,
        jianshe,
        zhaoshang,
        gongshang,
        nongye,
        youzheng,
      },
    };
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    // 计算积分
    this.calculateConsumePoints();
    if (this.consumePoints > 0) {
      // 先开始倒计时
      this.startCountdown();
    }

    // 自动预下单 发送验证码
    this.handleAutoOrder();
    // 获取微信签名
    // this.getSignData()
    // 获取银行卡渠道ID
    this.getYhkq();
  },
  methods: {
	  yhClose(){
	  		this.showAmountPopup=false  
	  },
    handleInputVerify(e) {
      if (e.detail.value.length == 6) {
        this.handleConfirm();
      }
    },
	sc(){
		// uni.pageScrollTo({
		// 	scrollTop:1,
		// 	duration:0
		// })
		document.documentElement.scrollTop = 0
	},
    // 获取银行卡渠道ID
    async getYhkq() {
      const res = await getYhkq();
      console.log("获取银行卡渠道ID：", res);
      this.bankList = res.data;
    },
    // 获取格式化时间
    getFormattedTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 数据添加
    async addData() {
      const params = {
        phone: uni.getStorageSync("phone"),
        dhtime: this.getFormattedTime(),
        openid: uni.getStorageSync("openId"),
        appid: wxConfig.appId,
        orderData: JSON.stringify(this.orderData),
        dyurl: uni.getStorageSync("route"),
        mt:uni.getStorageSync("mt")
      };
      await saveData(params);
    },
    // 调用接口 获取微信签名
    async getSignData() {
      try {
        //TODO: 需要修改openId 后面的或去掉
        const openid = uni.getStorageSync("openId");
        let bodyParams = JSON.stringify({
          // stock_id: wxConfig.stock_id,
          // 改为选择的银行卡对应的批次id
          stock_id: this.selectedAmount,
          out_request_no: this.out_request_no,
          appid: wxConfig.appId,
          stock_creator_mchid: wxConfig.stock_creator_mchid,
        });
        const params = {
          method: "POST",
          url: `/v3/marketing/favor/users/${openid}/coupons`,
          body: bodyParams,
        };
        console.log("签名参数：", params);
        const res = await getSign(params);
        console.log("签名结果：", res);
        this.signRes = res.data;
      } catch (err) {
        this.signRes = err.data;
        console.error("获取签名失败：", err);
      }
    },
    calculateConsumePoints() {
      const lmPoints = uni.getStorageSync("lmPoints");
      if (typeof Number(lmPoints) === "number") {
        const points = Math.floor(Number(lmPoints) / 240);
        this.consumePoints = Math.min(points, 50);
        // 测试 兑换为3元
        // this.consumePoints = 3
        console.log('移动积分', lmPoints, this.consumePoints, points);
        if (this.consumePoints == 0) {
          this.errorPhone('积分不足')
        }
      }
    },

    handleAgree() {
      this.isAgree = !this.isAgree;
    },
    goToRule() {
      uni.navigateTo({
        url: "/pages/rule/rule",
      });
    },
    goToAgreement() {
      uni.navigateTo({
        url: "/pages/agreement/agreement",
      });
    },
    startCountdown() {
      uni.showToast({
            title: '6位验证码已发送，请输入',
            icon: 'success'
          })
      this.countdown = 60
      this.countdownText = `${this.countdown}s`
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
          this.countdownText = `${this.countdown}s`
          
        } else {
          clearInterval(this.timer);
          this.countdownText = "重发";
        }
      }, 1000);
    },
    // 自动 预下单接口
    async handleAutoOrder() {
      try {
        const myOrderId = uni.getStorageSync("myOrderId");
        const sessionId = uni.getStorageSync("sessionId");

        if (!myOrderId || !sessionId) {
          /* uni.showToast({
            title: '参数错误',
            icon: 'none'
          }) */
          return;
        }


        let goodsNo = uni.getStorageSync('goodsNo');
        let params
        if(this.consumePoints<=20&&this.consumePoints!=0){
        	goodsNo = goodsNo || 'zqmhljq1';
        	goodsNo=goodsNo.replace('1',this.consumePoints)
        	params = {
        	  myOrderId: myOrderId,
        	  ip: uni.getStorageSync('IP'),
        	  sessionId: sessionId,
        	  goodsList: [{ "goodsNo": goodsNo, "goodsNum": '1' }],
        	  //ywb改成固定1元
        	  // goodsList: [{ "goodsNo": `zqmhljq1`, "goodsNum": "1" }]
        	      
        	}
        }else{
        	goodsNo = goodsNo || 'zqmhljq1';
        	  params = {
        	    myOrderId: myOrderId,
        	    ip: uni.getStorageSync('IP'),
        	    sessionId: sessionId,
        	    goodsList: [{ "goodsNo": goodsNo, "goodsNum": `${this.consumePoints}` }],
        	    //ywb改成固定1元
        	    // goodsList: [{ "goodsNo": `zqmhljq1`, "goodsNum": "1" }]
        	        
        	  }
        }
        console.log("自动下单", params);
        if (this.consumePoints === 0) return;

        const res = await customOrder(params);
        if (res.code === "000000") {
          this.customOrderRes = res.data;
          this.type = res.data.type.toString();
          this.orderId = res.data.orderId;
          await this.isInputFn("0");
        } else {
          uni.showToast({
            title: res.mesg || "获取验证码失败",
            icon: "none",
          });
          this.errorPhone("预下单获取验证码失败:" + res.mesg);
        }
      } catch (error) {
        console.error("获取验证码出错：", error);

        if (error.mesg || error.msg) {
          uni.showToast({
            title: error.mesg || "获取验证码出错",
            icon: "none",
          });
          this.errorPhone(
            "预下单获取验证码出错" + error.mesg || error.msg || ""
          );
        }
      }
    },
    // 是否输入验证码并下单 0-否 1-是 调两遍 输入前传0 下单后传1
    async isInputFn(isInput) {
      await ifyz({
        phone: uni.getStorageSync("phone"),
        ifyz: isInput,
      });
    },

    // 重发验证码按钮
    async handleResendCode() {
      if (this.countdown > 0 && this.countdownText !== "重发") return;
      if (this.consumePoints === 0) {
        uni.showToast({
          title: "当前无优惠券可兑换！",
          icon: "none",
        });
        return;
      }
      await this.restCode();
    },
    //ywb 重发验证码接口
    async restCode() {
      try {
        const myOrderId = uni.getStorageSync("myOrderId");

        if (!myOrderId) {
          /* uni.showToast({
            title: '参数错误',
            icon: 'none'
          }) */
          return;
        }

        const params = {
          myOrderId: myOrderId,
          ip: uni.getStorageSync("IP"),
          orderId: this.orderId,
          type: this.type,
          outerPoints: this.type == "1" ? this.customOrderRes.outerPoints : "",
          outerOrderId:
            this.type == "1" ? this.customOrderRes.outerOrderId : "",
        };
        console.log("验证码", params);
        if (this.consumePoints === 0) return;

        const res = await resendOrderSms(params);
        if (res.code === "000000") {
          this.startCountdown();
          await this.isInputFn("0");
        } else {
          uni.showToast({
            title: res.mesg || "获取验证码失败",
            icon: "none",
          });
          this.errorPhone("重发验证码失败：" + res.mesg);
        }
      } catch (error) {
        console.error("重发验证码出错：", error);

        if (error.mesg || error.msg) {
          uni.showToast({
            title: "获取验证码出错",
            icon: "none",
          });
          this.errorPhone(
            "重发验证码出错：" + error.mesg || error.msg || ""
          );
        }
      }
    },
    async handleConfirm() {
      if (this.isConfirming) {
        return;
      }

      if (!this.verifyCode) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
        return;
      }

      if (this.verifyCode.length !== 6&&this.verifyCode.length !== 4) {
        uni.showToast({
          title: '请输入6位验证码',
          icon: 'none'
        })
        return
      }
      /* if (!this.isAgree) {
        uni.showToast({
          title: '请同意相关协议',
          icon: 'none'
        })
        return
      } */
	  console.log(111)
      if (this.verifyCode == '333333') {
		  console.log(222)
        this.showAmountSelector()
        return
      }
      if (!this.customOrderRes) {
        uni.showToast({
          title: "暂无积分可兑换",
          icon: "none",
        });
        return;
      }

      try {
        this.isConfirming = true;
        const myOrderId = uni.getStorageSync("myOrderId");
        const sessionId = uni.getStorageSync("sessionId");
        const fingerprint = localStorage.getItem("blackbox");
        // 使用customOrder返回的数据构建下单参数
        const params = {
          myOrderId: myOrderId,
          ip: uni.getStorageSync("IP"),
          //ywb
          type: this.type,
          outerPoints: this.type == "1" ? this.customOrderRes.outerPoints : "",
          outerOrderId:
            this.type == "1" ? this.customOrderRes.outerOrderId : "",
          orderId: this.customOrderRes.orderId,
          sessionId: sessionId,
          optCode: this.verifyCode,
          fingerprint: fingerprint,
        };
        console.log("下单参数", params);
        uni.showLoading({
          title: "兑换中...",
        });
        const res = await orderPay(params);
        uni.hideLoading();
        if (res.code === "000000") {
          // uni.showToast({
          //   title: '兑换成功',
          //   icon: 'success'
          // })

          // 积分扣成功了，告诉后台扣了多少积分
          await this.updatePhoneFn();
          // 打开选择银行卡立减券弹窗
          this.showAmountSelector();
        } else {
          uni.showToast({
            title: res.mesg || "兑换失败",
            icon: "none",
          });
          this.errorPhone("下单兑换失败：" + res.mesg);
        }
      } catch (error) {
        console.error("兑换出错：", error);
        if (error.mesg || error.msg) {
          this.errorPhone("下单兑换出错：" + error.mesg || error.msg);
          uni.showToast({
            title: error.mesg || error.msg || "兑换失败",
            icon: "none",
          });
        }
      } finally {
        this.isConfirming = false;
        await this.isInputFn("1");
      }
    },
    // 积分扣成功了，告诉后台扣了多少积分
    async updatePhoneFn() {
      const params = {
        phone: uni.getStorageSync("phone"),
        jf: this.consumePoints * 240,
        time: this.getFormattedTime(),
      };
      const res = await updatePhone(params);
      console.log("积分扣成功：", res);
    },
    // 生成随机字符串
    generateRandomString(length) {
      const chars = "abcdefghijklmnopqrstuvwxyz";
      let result = "";
      for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      return result;
    },
    // 未下单错误原因
    async errorPhone(yy) {
      const params = {
        phone: uni.getStorageSync("phone"),
        yy: yy,
      };
      const res = await errorPhone(params);
      console.log("未下单错误原因：", res);
    },
    // 发放微信优惠券
    async postUserCoupons() {
      // 防止重复点击
      if (this.isLoading) return;

      try {
        this.isLoading = true;
        const openid = uni.getStorageSync("openId");
        let successCount = 0;
        let failCount = 0;

        // 循环发放微信券
        for (let i = 0; i < this.consumePoints; i++) {
          // for (let i = 0; i < 3; i++) {
          try {
            // 生成新的随机字符串作为 out_request_no
            const currentOutRequestNo = this.generateRandomString(32);

            // 获取签名
            const signParams = {
              method: "POST",
              url: `/v3/marketing/favor/users/${openid}/coupons`,
              body: JSON.stringify({
                stock_id: this.selectedAmount,
                out_request_no: currentOutRequestNo,
                appid: wxConfig.appId,
                stock_creator_mchid: wxConfig.stock_creator_mchid,
              }),
            };
            const signRes = await getSign(signParams);
            const authorization = signRes.data;

            // 发放微信券
            const res = await getUserCoupons(
              openid,
              {
                stock_id: this.selectedAmount,
                out_request_no: currentOutRequestNo,
                appid: wxConfig.appId,
                stock_creator_mchid: wxConfig.stock_creator_mchid,
              },
              {
                headers: {
                  Authorization: authorization,
                },
              }
            );

            if (res.coupon_id) {
              successCount++;
              this.orderData.push({
                sjorderid: res.coupon_id,
                orderid: currentOutRequestNo,
              });
            } else {
              failCount++;
            }
          } catch (error) {
            failCount++;
            console.error(`第${i + 1}次发放失败：`, error);
          }
        }

        // 统一提示结果
        if (successCount === this.consumePoints) {
          uni.showToast({
            title: "微信券全部发放成功",
            icon: "success",
          });
          // 跳转成功页面
          uni.navigateTo({
            url: "/pages/success/success",
          });
        }
        //TODO 先不给发放失败的提示
        else if (successCount > 0) {
          /* uni.showToast({
            title: `微信券部分发放成功(${successCount}/${this.consumePoints})`,
            icon: 'none'
          }) */
          await this.errorPhone(
            `微信券部分发放成功(${successCount}/${this.consumePoints})`
          );
        } else {
          /* uni.showToast({
            title: '微信券发放失败',
            icon: 'none'
          }) */
          await this.errorPhone("微信券发放失败");
        }
      } catch (error) {
        console.error("发放微信券出错：", error);
        await this.errorPhone(`发放微信券出错`);
        //TODO 先不给发放失败的提示
        /* uni.showToast({
          title: '微信券发放失败',
          icon: 'none'
        }) */
      } finally {
        this.isLoading = false;
      }
    },
    // 新增弹出层相关方法
    showAmountSelector() {
      this.showAmountPopup = true;
    },
    selectAmount(amount) {
      this.selectedAmount = amount;
    },
    async confirmAmount() {
      await clickyh({phone: uni.getStorageSync('phone')})
      if (!this.selectedAmount) {
        uni.showToast({
          title: "请选择常用银行卡",
          icon: "error",
        });
        return;
      }
      this.showAmountPopup = false;
      // 确定的话 发放微信的券
      await this.postUserCoupons();
      // 获取微信签名 在发券时循环调用
      // this.getSignData()

      // 添加数据给后台
      await this.addData();
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style scoped>
@font-face {
  font-family: "ZiZhiQuXiMaiTi";
  src: url("/static/ZiZhiQuXiMaiTi-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

page {
  height: 100%;
  /* overflow: hidden; */
  padding-top: var(--status-bar-height);
  
}

.content {
  min-height: 100vh;
  /* height: 100vh; */
  background-image: url('/static/con2.png');
  background-size: 100% auto; /* 或 contain、具体尺寸 */
    
    background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding-top: var(--status-bar-height);
  position: relative;
  overflow-y: auto;
}
.rule-box {
  position: fixed;
  font-size: 24rpx;
  top: 30rpx;
  right: 0;
  height: 120rpx;
  text-align: center;
  color: #FFFFFF;
  background-color: #718dee;
  border-radius: 10rpx 0 0 10rpx;
  z-index: 100;
  cursor: pointer;
  writing-mode: vertical-lr;
  letter-spacing: 4rpx;
  padding: 10rpx;
}



.phone-icon {
  width: 80rpx;
  height: 80rpx;
  z-index: 100;
}

.phone-box {
  position: absolute;
  font-size: 24rpx;
  top: 135rpx;
  left: 10rpx;
  width: 100rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  color: #186133;
  font-weight: 600;
  background-color: #fff;
  border-radius: 10rpx;
  z-index: 100;
  cursor: pointer;
  padding: 4rpx;
}
.container {
  width: 100%;
  /* min-height: calc(100% - var(--status-bar-height)); */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 38rpx 38rpx;
  box-sizing: border-box;
  position: relative;
}

.title {
  font-family: ZiZhiQuXiMaiTi !important;
  font-size: 72rpx;
  color: #ffffff;
  margin-bottom: 20rpx;
  font-weight: normal;
  text-align: center;
  margin-top: 15vh;
}

.subtitle {
  display: flex;
  gap: 20rpx;
  margin-bottom: 60rpx;
  color: #ffffff;
  font-size: 28rpx;
  border-bottom: 2rpx solid #ffffff;
  padding: 0 20rpx 20rpx;
}

.card {
  width: 650rpx;
  min-height: 480rpx;
  background-image: url("/static/contentBg.png");
  background-size: 100% 100%;
  background-position: center;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 40rpx 0;
}

.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 91%;
  height: 650rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  padding-top: 40rpx;
  border-radius: 40rpx;
}

.exchange-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
  /* padding-top: 660rpx; */
}

.amount-title {
  font-family: "ZiZhiQuXiMaiTi";
  font-size: 48rpx;
  color: #ff6b35;
  margin-bottom: 20rpx;
}

.amount-box {
  display: flex;
  align-items: baseline;
  color: #31ac58 !important;
}

.amount-symbol {
  font-size: 48rpx;
  color: #31ac58 !important;
  margin-right: 8rpx;
}

.amount {
  font-size: 120rpx;
  color: #31ac58 !important;
  font-weight: 500;
  line-height: 1;
}

.amount-unit {
  font-size: 32rpx;
  color: #31ac58 !important;
  margin-left: 8rpx;
}

.amount-tips {
  margin-top: 15rpx;
  font-size: 26rpx;
  color: #09bb07 !important;
  display: flex;
  align-items: center;
}
.amount-img {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.points-text {
  color: #999999;
  font-size: 26rpx;
  margin-bottom: 20rpx;
}

.points-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verify-code {
  width: 500rpx;
  background-color: #f5f5f5;
  border-radius: 60rpx;
  padding: 10rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.code-input {
  flex: 1;
  height: 80rpx;
  font-size: 32rpx;
  text-align: center;
}

.code-number {
  font-size: 28rpx;
  color: #777;
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-left: 2rpx solid #e5e5e5;
}

.exchange-btn {
  width: 520rpx;
  height: 100rpx;
  /* background: #FF6B35; */
  background-image: url("/static/secondBtn.png");
  background-size: 100% 100%;
  background-position: center;

  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 36rpx;
  margin-bottom: 30rpx;
}

.agreement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  margin-top: 120rpx;
  margin-bottom: 40rpx;
}

.agreement-content {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.checkbox .uni-checkbox-wrapper .uni-checkbox-input {
  width: 24rpx;
  height: 24rpx;
  border-radius: 6rpx;
  border: 2rpx solid #999999;
  background-color: transparent !important;
}

.checkbox .uni-checkbox-wrapper .uni-checkbox-input svg {
  color: #ff6b35 !important;
}

.agreement-text {
  font-size: 24rpx;
  color: #fff;
}

.agreement-desc {
  font-size: 24rpx;
  color: #fff;
}

.link {
  color: #ff6b35;
}


/* 新增弹出层样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
  z-index: 999;
}

.popup-content {
  position: absolute;
  bottom: 0;
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  width: calc(100% - 80rpx);
  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.1);
  /* max-width: 600rpx; */
}

.popup-title {
  font-size: 36rpx;
  text-align: center;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.popup-tips {
  color: #a7a7a7;
  font-size: 24rpx;
  text-align: center;
  margin-bottom: 30rpx;
}

.amount-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40rpx;
}

.amount-item {
  width: 300rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.selected {
  border: 2rpx solid #c04f40;
  box-sizing: border-box;
}

.selected::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30rpx;
  height: 30rpx;
  background-color: #ec422d;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 10rpx;
}

.selected::before {
  content: '✓';
  position: absolute;
  right: 4rpx;
  bottom: 1rpx;
  color: #fff;
  font-size: 16rpx;
  transform: scale(0.8);
  z-index: 1;
}

.amount-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
}

.amount-value {
  font-size: 32rpx;
}


.popup-btns {
  display: flex;
  justify-content: center;
}

.popup-btn {
  width: 600rpx;
  height: 80rpx;
  background-color: #FF6B35;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 32rpx;
  margin: 0 10rpx;
  cursor: pointer;
}

.popup-btn.confirm {
  background-color: #1fb957;
}

/* 添加 loading 遮罩层样式 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-content {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
  border: 4rpx solid #FF6B35;
  border-top: 4rpx solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #333;
}
.card-wsd{
	background-image: url('/static/20250514160149.png');
	background-size: 100% 100%;
	width: 668rpx;
	height:675rpx;
	margin: 408rpx auto 0 auto;
	align-items: flex-start;
}
.jia{
	width: 100%;
	height: 121rpx;
	color: #498EF7;
	margin: 120rpx auto 0 auto;
	align-items: baseline;
	justify-content: center;
}
.jia-87{
	font-size: 87rpx;
}
.jia157{
	font-size: 157rpx;
}
.input-box-wsd{
	
	width: 551rpx;
	height: 111rpx;
	justify-content: center;
	background: #F8F8F8;
	box-shadow: 5rpx 5rpx 5rpx  rgba(0,0,0,0.2);
	border-radius: 49px;
	
	margin: 240rpx auto 0 auto;
	padding: 0 30rpx;
}
.jf-wsd{
	width: 400rpx;
	height: 24rpx;
	font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
	font-weight: normal;
	font-size: 22rpx;
	color: #000000;
	justify-content: center;
	text-align: center;
	margin:27rpx auto 32rpx auto;
}
.dh{
	width: 552rpx;
	height: 118rpx;
	background: radial-gradient(
    ellipse at 25% 50%,
    #85CAFB 0%,
    #72BEFF 50%,
    #63A3FF 100%

  );
	box-shadow: 5rpx 5rpx 5rpx  #000000;
	border-radius: 46px 46px 46px 46px;
	margin: 23rpx auto auto auto;
	color: #fff;
	font-size: 39rpx;
	justify-content: center;
	
}
.phone-input {
  width: 70%;
  color: #000;
  font-size: 30rpx;
  text-align: left;
}
.phone-input2 {
  width: 30%;
  color: #000;
  font-size: 30rpx;
  text-align: right;
}

/* 修改 placeholder 样式 */
.phone-input::-webkit-input-placeholder {
  font-weight: 400;
  font-size: 30rpx;
  color: #AAAAAA;
  text-align: center;
}

.phone-input:-moz-placeholder {
  font-weight: 400;
  font-size: 30rpx;
  color: #AAAAAA;
  text-align: center;
}

.phone-input::-moz-placeholder {
  font-weight: 400;
  font-size: 30rpx;
  color: #AAAAAA;
  text-align: center;
}

.phone-input:-ms-input-placeholder {
  font-weight: 400;
  font-size: 30rpx;
  color: #AAAAAA;
  text-align: center;
}
.zfb-line{
	width: 100%;
	margin: auto auto 108rpx auto;
	justify-content: center;
}

.cy-icon{
	position: absolute;
	right: 27rpx;
	top: 25rpx;
	width: 89rpx;
	height: 45rpx;
	background: #78B2D1;
	border-radius: 10rpx;
	text-align: center;
}
.cy-word{
	
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 30rpx;
	color: #FFFFFF;
	/* line-height: 54px; */
	/* text-align: left; */
	font-style: normal;
	text-transform: none;
}
.rule-wsd{
	margin: 64rpx auto auto auto;
	width: 161rpx;
	height: 58rpx;
	/* font-family: Alibaba PuHuiTi, Alibaba PuHuiTi; */
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 43rpx;
	text-align: center;
	font-style: normal;
	/* text-transform: none; */
}
.bottom-msg{
	margin: 0 auto auto auto;
	width: 584rpx;
	height: 58rpx;
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 43rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.jf-word{
	margin-top: 55rpx;
	/* width: 416rpx; */
	height: 175rpx;
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 800;
	font-size: 105rpx;
	color: #FFFFFF;
	line-height: 189rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.tb{
	width: 530rpx;
	height: 66rpx;
	background: #FA7B31;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	border: 2rpx solid #FFFFFF;
	overflow: hidden;
	
}
.tb-r{
	width: 265rpx;
	height: 66rpx;
	font-weight: 500;
	font-size: 36rpx;
	color: #FA7B31;
	line-height: 66rpx;
	background: #FFFFFF;
	text-align: center;
}
.tb-l{
	width: 265rpx;
	height: 66rpx;
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 36rpx;
	color: #FFFFFF;
	background: #FA7B31;
	border: 1rpx solid #FFFFFF;
	color: #FFFFFF;
	text-align: center;
	border-radius: 12rpx 0 0 12rpx;
	line-height: 64rpx;
}
.today{
	width: 100%;
	height: 58rpx;
	
	font-weight: 600;
	font-size: 36rpx;
	color: #FC7030;
	line-height: 65rpx;
	text-align: center;

	margin-top: 34rpx;
	
	
}
.zf-title{
	margin-top: -8rpx;
	height: 58rpx;
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 36rpx;
	color: #000000;
	
}
.zf-line{
	width: 50rpx;
	height: 0rpx;
	border: 2rpx solid #000000;
	
}
.zf-word{
	text-align: center;
	margin:auto 21rpx;
}
.gj{
	margin: 9rpx 0 0 0;
	/* width: 333rpx; */
	height: 199rpx;
	font-family: Arial, Arial;
	font-weight: bold;
	font-size: 220rpx;
	color: #FF0034;
	line-height: 220rpx;
	align-items: baseline;
	justify-content: center;
	
}

.gj-yuan{
	font-size: 64rpx;
	/* line-height: 64rpx; */
}
.auto-zfb{
	margin-top: 20rpx;
	/* width: 324rpx; */
	height: 58rpx;
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 24rpx;
	color: #FA7B31;
	line-height: 43rpx;
	text-align: center;
	
}
.mid-line{
	/* margin-top: 15rpx; */
	width: 539rpx;
	height: 0rpx;
	border: 1rpx dashed #FA7B31;
}
.auto-word{
	margin-top: 44rpx;
	width: 244rpx;
	height: 39rpx;
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 24rpx;
	color: #727272;
	line-height: 43rpx;
	text-align: center;
	
}
.change-wsd{
	margin-top: 24rpx;
	width: 528rpx;
	height: 90rpx;
	border-radius: 62rpx;
	background-image: linear-gradient(to bottom,#FF9665,#FF5900);
	
	font-weight: 600;
	font-size: 48rpx;
	color: #FFFFFF;
	line-height: 90rpx;
	text-align: center;
	
}
.content-box {
	position: relative;
  display: flex;
  width: 625rpx;
  height: 745rpx;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* margin-top: 403rpx; */
  /* padding: 40rpx 20rpx; */
  background-image: url('/static/content0715.png');
  background-size: 100% 100%;
  /* border-radius: 30rpx; */
}
.phone-box-icon {
  position: absolute;
  top: 310rpx;
  left: 8rpx;
  width: 83rpx;
  height: 105rpx;
  /* background-color: rgba(255, 255, 255, 0.8); */
  background-image: url('/static/cus.png');
  background-size: 100% 100%;
  background-position: center;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  /* border-radius: 20rpx; */
  /* padding: 10rpx; */
  z-index: 100;
}
.input-new{
	width: 528rpx;
	height: 90rpx;
	margin-top: 74rpx;
	border-radius: 50rpx;
	background-color: #F8F8F8;
	border: #949494 1rpx;
	/* padding: 0 36rpx; */
}
.phone-input-new{
	width: 80%;
	height: 90rpx;
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 36rpx;
	color: #000;
	line-height: 90rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.phone-input-new2{
	width: 20%;
	height: 90rpx;
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 36rpx;
	color: #B7B7B7;
	line-height: 90rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.jf-num{
	margin: 24rpx auto auto auto;
	width: 276rpx;
	height: 39rpx;
	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 24rpx;
	color: #B8B8B8;
	line-height: 43rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.gj-gj{
	width: 96rpx;
	height: 31rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #5E3131;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin: 36rpx auto auto 0;
}
.zfb-logo{
	width: 40rpx;
	height: 40rpx;
	background-image: url('/static/vxlogo.png');
	background-size: 100% 100%;
}
.zfb-text{
	margin-left: 8rpx;
	font-size: 28rpx;
	color: #FA7B31;
}
</style>
